<template>
  <div class="conditionBox">
    <div class="conditionRow">
      <span>申请日期</span>
      <el-date-picker
        class="w150"
        v-model="dateRange"
        type="daterange"
        value-format="YYYY-MM-DD"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <div class="conditionRow">
      <el-select v-model="searchForm.isNew" class="w150">
        <el-option value="" label="请选择分配状态"></el-option>
        <el-option value="TRUE" label="未分配"></el-option>
        <el-option value="FALSE" label="已分配"></el-option>
      </el-select>
    </div>
    <div class="conditionRow">
      <el-select v-model="searchForm.markerGuid" class="w120">
        <el-option v-for="item of salers" :key="item.listKey" :value="item.listKey" :label="item.listValue"></el-option>
      </el-select>
    </div>
    <div class="conditionRow">
      <el-select v-model="searchForm.label" class="w150">
        <el-option v-for="item of tryList" :key="item.listKey" :value="item.listKey" :label="item.listValue"></el-option>
      </el-select>
    </div>
    <div class="conditionRow">
      <el-select v-model="searchForm.categoryId" class="w150">
        <el-option v-for="item of categoryList" :key="item.listKey" :value="item.listKey" :label="item.listValue"></el-option>
      </el-select>
    </div>
    <div class="conditionRow">
      <el-input style="width: 240px;" v-model="searchForm.con" @keyup.enter="searchForm.pageNumber = 1; getTableData()" placeholder="请输入企业名称/联系人/联系电话"></el-input>
    </div>
    <el-button style="margin-right: 50px;" type="primary" @click="searchForm.pageNumber = 1; getTableData()">搜索</el-button>
    <el-button v-if="selectedRows.length" type="primary" @click="allocate">批量分配</el-button>
    <slot></slot>
    <el-button type="primary" @click="$emit('export', searchForm)">导出</el-button>
  </div>
  <div v-loading="loading">
    <div class="tabBox">
      <el-table border :data="tableData" 
        @selection-change="selectionChange"
        :row-key="row => row.guid">
        <el-table-column type="selection" reserve-selection></el-table-column>
        <el-table-column type="index" label="序号" :index="index => (searchForm.pageNumber - 1) * searchForm.pageSize + index + 1"></el-table-column>
        <el-table-column label="企业名称" prop="compName" show-overflow-tooltip></el-table-column>
        <el-table-column label="客户名称" prop="contact"></el-table-column>
        <el-table-column label="联系电话" prop="tel"></el-table-column>
        <el-table-column label="申请日期" prop="regTime" show-overflow-tooltip></el-table-column>
        <el-table-column label="回访次数" prop="responNum"></el-table-column>
        <el-table-column label="销售人员" prop="realname"></el-table-column>
        <el-table-column fixed="right" width="80" align="center">
          <template v-slot="{ row }">
            <el-dropdown @command="command => operate[command](row)" max-height="138px">
              <el-button type="text">操作</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="config">配置</el-dropdown-item>
                  <el-dropdown-item command="detail">详情</el-dropdown-item>
                  <el-dropdown-item command="records">操作记录</el-dropdown-item>
                  <el-dropdown-item command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageContainer">
      <el-pagination
        hide-on-single-page
        v-model:currentPage="searchForm.pageNumber"
        :page-sizes="[20, 50, 100]"
        v-model:page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="searchForm.pageNumber = 1; getTableData()"
        @current-change="getTableData">
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
  
  import {
     ref,
     reactive,
     inject
  } from 'vue'
  
  const $post = inject('$post');
  const $confirm = inject('$confirm');
  const $message = inject('$message');
  const $router = inject('$router');
  const $emit = defineEmits(['records', 'config', 'export'])
  
  const loading = ref(false);
  
  const dateRange = ref([]);
  
  const total = ref(0);
  const searchForm = reactive({
    state: 'WAITING',
    // 是否新用户
    isNew: '',
    // 申请日期开始时间
    tryBsTime: '',
    // 申请日期结束时间
    tryBeTime: '',
    // 销售人员
    markerGuid: '',
    // 进度标签
    label: '',
    // 产品类别
    categoryId: '',
    // 搜索条件
    con: '',
    pageNumber: 1,
    pageSize: 10
  })
  
  // 获取所有销售人员
  const salers = ref([]);
  $post('/v2/tdltry/saler?need=false').then(res => {
    salers.value = res.data;
    salers.value.splice(0, 0, {
      listKey: '',
      listValue: '所有销售人员'
    })
  })
  
  // 获取进度列表
  const tryList = ref([])
  $post('/v2/tdltry/getTryList').then(res => {
    tryList.value = res.data;
    tryList.value.splice(0, 0, {
      listKey: '',
      listValue: '请选择进度标签'
    })
  })
  
  // 获取产品类别
  const categoryList = ref([])
  $post('/v2/tdltry/CategoryList').then(res => {
    categoryList.value = res.data;
    categoryList.value.splice(0, 0, {
      listKey: '',
      listValue: '请选择产品类别'
    })
  })
  
  // 获取表格数据
  const tableData = ref([]);
  const getTableData = () => {
    if (dateRange.value.length) {
      searchForm.tryBsTime = dateRange.value[0];
      searchForm.tryBeTime = dateRange.value[1];
    }
    loading.value = true;
    $post('/tdltry/list', searchForm).then(res => {
      tableData.value = res.data;
      total.value = res.pageObj.totalRecords;
    }).finally(_ => loading.value = false);
  }
  getTableData();
  
  // 表格选中事件
  const selectedRows = ref([]);
  const selectionChange = selection => {
    selectedRows.value = selection;
  }
  
  // 批量分配、配置
  const allocate = () => {
    let guids = selectedRows.value.map(item => item.guid).join(',');
    $emit('config', guids);
  }
  
  // 操作的所有方法
  const operate = {
    config: function(row) {
      $emit('config', row.guid);
    },
    detail: function (row) {
      $router.push('/operation/try-manage/detail?guid=' + row.guid);
    },
    records: function (row) {
      $emit('records', row);
    },
    del: function (row) {
      $post('/tdltry/status?guid=' + row.guid).then(res => {
        if (res.data) {
          return $confirm('是否删除该账户?', '提示')
        }
        $message.warning('该试用已经分配给市场人员，不能删除！');
        return Promise.reject();
      }).then(res => {
        return $post('/tdltry/deleteUse?guid=' + row.guid)
      }).then(res => {
        getTableData();
        $message.success('删除成功！');
      })
    }
  }
  
</script>

<style>
</style>
